<template>
  <!-- <AgGridVuesCopys :rowHeight="33" :headerHeight="33"
    style="width: 80%; height: 80%"
    ref="multipleTable"
    class="ag-theme-alpine"
    :columnDefs="columnDefs"
    :rowData="rowData"
    @grid-ready="onGridReady"
    :defaultColDef="defaultColDef"
    @selection-changed="onSelectionChanged"
    :rowSelection="rowSelection"
    :enableBrowserTooltips="true"
    :stopEditingWhenCellsLoseFocus="false"
    @cell-value-changed="onCellValueChanged"
    :isRowSelectable="isRowSelectable"
    :editType="editType"
    :suppressRowClickSelection="suppressRowClickSelection"
    :suppressClickEdit="suppressClickEdit"
    :sideBar="sideBar"
    :components="components"
    :excelStyles="excelStyles"
  >
  </AgGridVuesCopys> -->
  <encapsulation-agrid :configaggrid="configaggrid"></encapsulation-agrid>
  <!-- 导出按钮 -->
  <!-- <el-button type="info" icon="el-icon-download" size="mini" @click="exportExcel()">导出</el-button> -->
</template>

<script setup lang="ts">

import { ref, reactive, onMounted } from 'vue'
import 'ag-grid-community/styles/ag-grid.css'
import 'ag-grid-community/styles/ag-theme-alpine.css'
// 1.class="table ag-theme-balham"
// Ag-Grid表格的主题有 5 种
// ① ag-theme-alpine
// ② ag-theme-alpine-dark
// ③ ag-theme-balham
// ④ ag-theme-balham-dark
// ⑤ ag-theme-material
// 2.columnDefs 定义表格列
// 3.rowData 表格展示的数据
let configaggrid = ref({
  url: 'qms/scannedGreyCloth/getPageByCut', //接口路径
  queryData: {
    planOrderCode: '',
    startDate: '',
    endDate: '',
  }, //接口参数
  checkboxShow: true,
  column: [
    {
      headerName: '公司',
      field: 'projectCode',
      width: 150,
    },
    {
      headerName: '检验单号',
      field: 'billNumber',
      width: 150,
    },

    {
      headerName: '计划单号',
      field: 'planOrderCode',
      tooltipField: 'planOrderCode',
      width: 150,
    },
    {
      headerName: '坯布编号',
      field: 'greigeCode',
      tooltipField: 'greigeCode',
      width: 150,
    },
    {
      headerName: '坯布名称',
      field: 'greigeName',
      tooltipField: 'greigeName',
      width: 300,
    },
    {
      headerName: '机台号',
      field: 'machine',
      tooltipField: 'machine',
      width: 150,
    },
    {
      headerName: '匹号',
      field: 'horses',
      width: 150,
    },
    {
      headerName: '原料信息',
      field: 'codes',
      width: 150,
    },
    {
      headerName: '纱批',
      field: 'batchs',
    },
    {
      headerName: '扣米数',
      field: 'priceNum',
      width: 200,
    },
    {
      headerName: '次布数量',
      field: 'timeClothShareWeight',
      width: 200,
    },
    {
      headerName: '备注',
      field: 'remark',
      width: 200,
    },
    {
      headerName: '检验日期',
      field: 'billDate',
      width: 200,
    },
  ], //列表
  default: {
    sortable: true, //可排序
    resizable: true, //可拖动改变列宽
    filter: true, //可过滤筛选
    editable: false, //是否可编辑
    //flex: 1
  },
})
let columnDefs = reactive<any>([]) //表格默认展示列
let rowData = reactive<any>([]) //画面显示表格数据,查询后赋值
let gridApi = ref<any>() //表格api
let columnApi = ref<any>() //
onMounted(() => {
  //小知识reactive定义的数组或者对象，不能直接赋值修改，否则定义的数据userMenu将失去响应性。
  rowData.push(
    ...[
      { id: 1, name: '高启强', age: '65' },
      { id: 2, name: '高启盛', age: '45' },
      { id: 3, name: '老默', age: '60' },
    ]
  )
})
columnDefs = [
  {
    // ID
    headerName: 'ID', //序号
    field: 'id',
    pinned: 'left', //设置当前列为固定列,且固定在左侧
    checkboxSelection: true, //该列前带CheckBox复选框
  },
  {
    // 姓名
    headerName: '姓名', //表格显示列名
    field: 'name', //该列对应的后台返回数据中的field
    tooltipField: 'name', //鼠标悬浮是单元格内容的tooltip提示
    minWidth: 90, //最小宽度
    wrapText: true, //单元格文字自动换行
    autoHeight: true, //单元格根据内容自动调整高度
    editable: true,
  },
  {
    // 年龄
    headerName: '年龄',
    field: 'age',
    tooltipField: 'age',
    width: 250,
  },
]
// 4.@grid-ready="onGridReady" 表格初期化
//ag-grid创建完成后执行的事件
const onGridReady = (params: any) => {
  // 获取gridApi
  gridApi = params.api
  columnApi = params.columnApi
  // 调整列宽自适应
  params.api.sizeColumnsToFit()
  // let allColumnIds: any = []
  // columnApi.getColumns().forEach(function (column: any) {
  //   allColumnIds.push(column.colId)
  // })
  // columnApi.autoSizeColumns(allColumnIds, false)
}

// 5.defaultColDef 定义表格列的默认属性
let defaultColDef: {
  sortable: true //可排序
  resizable: true //可拖动改变列宽
  filter: true //可过滤筛选
  editable: true //可编辑
}
// 6.@selection-changed 表格选中行改变事件
//  @selection-changed="onSelectionChanged"
let onSelectionChanged = () => {}

// 7.rowSelection 定义行选中的方式
// :rowSelection="rowSelection"
// 只可以单行选中
//  rowSelection.value = 'single';
// 可以同时选中多行
// rowSelection.value = 'multiple';
let rowSelection = ref<any>(null)

// 8.enableBrowserTooltips
// 鼠标悬浮在单元格上,将单元格内容以悬浮窗形势提示。（防止单元格内容过多或宽度不够导致内容显示不全）
// :enableBrowserTooltips="true"

// 9.stopEditingWhenCellsLoseFocus
// 如果您希望网格在焦点离开单元格或网格时停止编辑，将该属性值设为true
// :stopEditingWhenCellsLoseFocus="false"

// 10.@cell-value-changed 表格单元格值改变事件
// @cell-value-changed="onCellValueChanged"
const onCellValueChanged = (event: Event) => {}

// 11.isRowSelectable 表格记录是否有可选中的CheckBox
// :isRowSelectable="isRowSelectable"
let isRowSelectable = ref<any>(null)
isRowSelectable = (rowNode: any) => {
  return rowNode.data ? rowNode.data.type === '1' : false
}

// 12.editType 编辑类型
// :editType="editType"
// 整行编辑
//   editType = 'fullRow';
// 单元格级别的编辑不用给表格设置editType属性
let editType = ref<any>(null)

// 13.suppressRowClickSelection
// :suppressRowClickSelection="suppressRowClickSelection"
let suppressRowClickSelection = ref<boolean>(true) //为true时,不可以通过点击当前行实现选中

// 14.suppressClickEdit
// :suppressClickEdit="suppressClickEdit"
let suppressClickEdit = ref<boolean>(false) //设置为true,点击单元格就不会编辑，使用自定义编辑事件

// 15.sideBar 表格侧边栏
// :sideBar="sideBar"
// 使用默认的侧边栏,【列定义】和【过滤器】都展示,且默认展开并首显【列定义】
let sideBar = ref<boolean>(true)
// 只展示【列定义】的勾选侧边栏
// sideBar: 'columns',
// 只展示【过滤器】的勾选侧边栏
// sideBar: 'filters',
// 自定义侧边栏(一)
// sideBar: {
//     toolPanels: [
//         {
//             id: 'columns',
//             labelDefault: 'Columns',
//             labelfield: 'columns',
//             iconfield: 'columns',
//             toolPanel: 'agColumnsToolPanel',
//             minWidth: 225,
//             maxWidth: 225,
//             width: 225
//         },
//         {
//             id: 'filters',
//             labelDefault: 'Filters',
//             labelfield: 'filters',
//             iconfield: 'filter',
//             toolPanel: 'agFiltersToolPanel',
//             minWidth: 180,
//             maxWidth: 400,
//             width: 250
//         }
//     ],
//     position: 'left',//侧边栏在表格左侧显示
//     defaultToolPanel: 'filters'//首先展示【过滤器】的勾选栏
// },
// 自定义侧边栏(二)
// sideBar: {
//             toolPanels: [{
//                 id: 'columns',
//                 labelDefault: 'Columns',
//                 labelfield: 'columns',
//                 iconfield: 'columns',
//                 toolPanel: 'agColumnsToolPanel',
//                 minWidth: 225,
//                 width: 225,
//                 maxWidth: 225,
//             }, ],//侧边栏只有【列定义】的勾选栏
//             position: 'right', //侧边栏在表格右侧显示
//             defaultToolPanel: null, //默认收起侧边栏(指定为null找不到首先展示的)
//         },

// 16.components 自定义的组件
// :components="components"
let components = ref<any>(null)

// 17.excelStyles
// @getRowStyle="changRowColor"
let excelStyles = ref<any>(null) //定义导出Excel的样式

// 18.getRowStyle设置列样式
// @getRowStyle="changRowColor"
// let changRowColor = (params: any) => {
//   return {
//     'background-color': '#ffd3d3', //颜色可以用英文、rgb以及十六进制
//   }
// }

//导出
let excelExportStyles = reactive({
  fileName: '', //导出Excel文件名称
  sheetName: '', //导出Excel文件中Sheet页名
})

// 【导出】
let exportExcel = () => {
  // 设置导出Excel的文件名
  let date = new Date()
  let excelheaderNameTime =
    date.getFullYear() +
    '' +
    (date.getMonth() + 1) +
    '' +
    date.getDate() +
    '' +
    date.getHours() +
    '' +
    date.getMinutes() +
    '' +
    date.getSeconds()
  // 设置导出Excel的文件名
  excelExportStyles.fileName = 'tableData' + excelheaderNameTime + '.xlsx'
  // 设置导出Excel的Sheet页名
  excelExportStyles.sheetName = '自定义名称'
  // 导出Excel文件
  // gridApi.exportDataAsExcel(excelExportStyles)
}

// API常用方法
// 网址参照https://www.ag-grid.com/javascript-data-grid/grid-api/
// sizeColumnsToFit(); //列宽自适应（fit）
// getAllColumns();//获取全部定义列
// autoSizeColumns();//列宽自适应
// startEditingCell(params); //打开编辑,需要传参
// stopEditing();//停止编辑
// getSelectedRows();//获取选中行的数据,返回值为数组形式
// getSelectedNodes();//获取选中行的全部内容(包含rowIndex),返回值为数组形式
// refreshCells(params);//刷新单元格,需要传参
// deselectAll();//清空表格选中行
// getColumnState();//获取全部列(包含列的显隐状态)

// 表格列定义中常用方法
// cellRender
// valueParser
// valueGetter
// valueFormatter
//  用法注意：
// let cellRender =(params:any)=> {
// params为当前行的数据
// console.log(params);
// }
// let cellRender= (params:any) => {
// params包含当前行全部属性,params.data为数据
// console.log(params.data);
// }
</script>
 
<style scoped>
</style>